<template>

  <div class="app-container">
    <div class="filter-container">
      <el-card shadow="never" :body-style="{ border: 0 }">
        <el-form ref="searchform" :inline="true" :model="query" class="demo-form-inline" size="small">
          <el-form-item label="人员查询：">
            <el-input v-model="query.name" clearable placeholder="请输入人员名称" size="medium"
              style="width:300px;margin-right:20px" />
          </el-form-item>
          <el-form-item label="时间：">
            <el-date-picker placeholder="起始时间" v-model="query.startTime" size="mediumn"
              value-format="yyyy-MM-dd HH:mm:ss" type="date" style="margin-right:20px">
            </el-date-picker>
            <el-date-picker placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" v-model="query.endTime" size="mediumn"
              type="date" style="margin-right:20px">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="medium" @click="handleSearch()">查询</el-button>
            <el-button type="default" size="medium" @click="handleClean()">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <el-card shadow="never">

      <div class="">
        <el-row :gutter="20">

          <el-col :span="6" v-for="item in tableData" :key="item.id">
            <el-card class="grid-content bg-purple" shadow="hover" @click.native="downloadPdf(item.evidenceFileUrl)"
              :body-style="{ padding: '0px' }">
              <div class="block bg-grey">
                <h3 align="center" class="mt42">{{item.name}}</h3>
                <div align="center" class="ft18" style="padding-top:15px">{{item.block}}-{{item.community}}</div>
              </div>
              <div class="block bg-white">
                <div class="ft18" align="center" style="padding-top:99px">{{item.verifyAt}}</div>
                <div class="col1" align="center" style="padding-top:10px">
                  <div v-if="item.verifyStatus == 0">无感认证</div>
                  <div v-if="item.verifyStatus == 1">本人认证</div>
                  <div v-if="item.verifyStatus == 2">他人认证</div>
                </div>
              </div>
              <div class="avatar">
                <div v-if="item.verImage">
                  <img style="width: 119px;height: 119px;  border-radius: 119px;" :src="item.verImage" />
                </div>
                <div v-else>
                <img style="width: 119px;" src="@/assets/wisdom/man.png" v-if="item.gender == 1"/>
                 <img style="width: 119px;" src="@/assets/wisdom/women.png"  v-if="item.gender == 0"/>
                </div>
              </div>
            </el-card>
          </el-col>


        </el-row>
      </div>

      <div class="pagination-container">
        <el-pagination background :current-page="pagination.pageNum" :page-sizes="[12, 20, 50, 100, 200, 300, 400]"
          :page-size="pagination.pagesize" layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.pageTotal" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </el-card>

  </div>
</template>

<script>
  import {
    fetchDataPost,
    exportPdf
  } from '../../../api/digitalcertificate';
  var queryRequest = {
    url: "/voucher/verfication-voucher/page-list"
  };
  export default {
    name: 'digitalcertificate', // 需与菜单的功能编码一致
    //   directives: { elDragDialog },
    data() {
      return {
        circleUrl: '@/assets/wisdom/tg.png',
        searchform: {
          keywords: '',
          realname: '',
          nickname: '',
          mobilephone: '',
          email: '',
          wechat: '',
          deptIds: ''
        },
        tableData: [],
        tableloading: true,
        pagination: {
          currentPage: 1,
          pagesize: 10,
          pageTotal: 0
        },
        sortableData: {
          order: 'desc',
          sort: 'CreatorTime'
        },
        dialogEditFormVisible: false,
        editFormTitle: '',
        editFrom: {},
        rules: {},
        formLabelWidth: '80px',
        currentId: '', // 当前操作对象的ID值，主要用于修改
        currentSelected: [],
        depData: [],
        query: {

          name: '',
          pageNum: 1,
          pageSize: 12,
          startTime: '',
          endTime: '',
        },
        pageTotal: 0
      }
    },
    created() {
      queryRequest.data = this.query;
      this.getData();
    },
    methods: {
      downloadPdf(url) {
        window.open(url, '_blank');
      },
      // 获取数据
      getData() {
        //获取居民列表
        fetchDataPost(queryRequest).then(res => {
          this.tableloading = false
          this.tableData = res.data.list;
          this.pagination.pageTotal = res.data.total;
        });
      },
      /**
       * 初始化数据
       */
      InitDictItem() {

      },

      // 取消按钮
      cancel() {
        this.dialogEditFormVisible = false
        this.reset()
      },
      // 表单重置
      reset() {
        this.editFrom = {
          Account: '',
          RealName: '',
          NickName: '',
          HeadIcon: '',
          Gender: '',
          Birthday: '',
          MobilePhone: '',
          Email: '',
          WeChat: '',
          ManagerId: '',
          SecurityLevel: '',
          Signature: '',
          Country: '',
          Province: '',
          City: '',
          District: '',
          OrganizeId: '',
          DepartmentId: '',
          RoleId: '',
          DutyId: '',
          IsAdministrator: '',
          IsMember: '',
          MemberGradeId: '',
          ReferralUserId: '',
          UnionId: '',
          SortCode: '',
          DeleteMark: '',
          EnabledMark: '',
          Description: '',
          CreatorTime: '',
          CreatorUserId: '',
          LastModifyTime: '',
          LastModifyUserId: '',
          DeleteTime: '',
          DeleteUserId: '',
          WechatOpenId: ''

          // 需个性化处理内容
        }
        this.resetForm('editFrom')
      },

      handleClean: function () {
        this.query = {
          name: '',
          pageNum: 1,
          pageSize: 10,
          startTime: '',
          endTime: '',
        }
        queryRequest.data = this.query
        this.getData()

      },

      /**
       * 点击查询
       */
      handleSearch: function () {
        this.getData()
      },

      /**
       * 新增/修改保存
       */
      saveEditForm() {
        this.$refs['editFrom'].validate((valid) => {
          if (valid) {
            const data = {
              Account: this.editFrom.Account,
              RealName: this.editFrom.RealName,
              NickName: this.editFrom.NickName,
              HeadIcon: this.editFrom.HeadIcon,
              Gender: this.editFrom.Gender,
              Birthday: this.editFrom.Birthday,
              MobilePhone: this.editFrom.MobilePhone,
              Email: this.editFrom.Email,
              WeChat: this.editFrom.WeChat,
              ManagerId: this.editFrom.ManagerId,
              SecurityLevel: this.editFrom.SecurityLevel,
              Signature: this.editFrom.Signature,
              Country: this.editFrom.Country,
              Province: this.editFrom.Province,
              City: this.editFrom.City,
              District: this.editFrom.District,
              OrganizeId: this.editFrom.OrganizeId,
              DepartmentId: this.editFrom.DepartmentId,
              RoleId: this.editFrom.RoleId,
              DutyId: this.editFrom.DutyId,
              IsAdministrator: this.editFrom.IsAdministrator,
              IsMember: this.editFrom.IsMember,
              MemberGradeId: this.editFrom.MemberGradeId,
              ReferralUserId: this.editFrom.ReferralUserId,
              UnionId: this.editFrom.UnionId,
              SortCode: this.editFrom.SortCode,
              DeleteMark: this.editFrom.DeleteMark,
              EnabledMark: this.editFrom.EnabledMark,
              Description: this.editFrom.Description,
              CreatorTime: this.editFrom.CreatorTime,
              CreatorUserId: this.editFrom.CreatorUserId,
              LastModifyTime: this.editFrom.LastModifyTime,
              LastModifyUserId: this.editFrom.LastModifyUserId,
              DeleteTime: this.editFrom.DeleteTime,
              DeleteUserId: this.editFrom.DeleteUserId,
              WechatOpenId: this.editFrom.WechatOpenId,

              Id: this.currentId
            }

            var url = 'Sys_user/Insert'
            if (this.currentId !== '') {
              url = 'Sys_user/Update'
            }
            saveSys_user(data, url).then((res) => {
              if (res.code === 200) {
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
                this.dialogEditFormVisible = false
                this.currentSelected = ''
                this.InitDictItem()
              } else {
                this.$message({
                  message: res.message,
                  type: 'error'
                })
              }
            })
          } else {
            return false
          }
        })
      },




      /**
       * 选择每页显示数量
       */
      handleSizeChange(val) {
        this.query.pageSize = val
        this.query.currentPage = 1
        this.getData()
      },
      /**
       * 选择当页面
       */
      handleCurrentChange(val) {
        this.query.pageNum = val
        this.getData()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .col1 {
    font-size: 18px;
    color: #4940FD;
  }

  .mt42 {
    padding-top: 42px;
    font-size: 28px;
    color: #333333;
  }

  .ft18 {
    font-size: 18px;
    color: #999999;
  }

  .app-container {
    background-color: #fcf9fc;
  }

  .el-card {
    border: 0;
    background-color: #fcf9fc;
    box-shadow: 0 !important;
  }

  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
    margin-bottom: 20px;
  }

  .bg-purple-dark {
    background: #99a9bf;

  }

  .bg-purple {
    position: relative;
    cursor: pointer;

    .avatar {
      position: absolute;
      top: 145px;
      left: 29.5%;
      border: 13px solid #ffffff;
      border-radius: 50%;
    }
  }

  .bg-grey {
    height: 210px;
    background: #E9E9F4;

  }

  .bg-white {
    height: 192px;
    background-color: #ffffff;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 10px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>